<template>
    <div id="edit_menu_1">
        <div class="container">
            <el-form v-if="Object.keys(form).length > 0" ref="form" :model="form" :rules="rules" label-width="100px">
                <div class="wrapper">
                    <div style="display: inline-block" class="wrapper-left">
                        <el-form-item label="名称：" style="position: relative; margin-bottom: 30px" prop="name">
                            <el-input
                                class="w"
                                @input="handleSearchName"
                                v-model="form.name"
                                :disabled="$route.query.e === '1' ? true : false"
                                placeholder="请输入名称"
                            ></el-input>
                            <p
                                style="margin: 0; padding: 0; font-size: 12px; position: absolute; left: 0; bottom: -30px"
                                :style="{ color: color }"
                            >
                                {{ tips }}
                            </p>
                        </el-form-item>

                        <el-form-item label="标签：" prop="tags">
                            <div class="block">
                                <el-cascader
                                    :show-all-levels="$route.query.e === '1' ? true : false"
                                    :disabled="$route.query.e === '1' ? true : false"
                                    v-model="form.tags"
                                    class="w"
                                    :options="tagList"
                                    :props="{
                                        emitPath: false,
                                        multiple: true,
                                        checkStrictly: true,
                                        value: 'value',
                                        label: 'label',
                                        children: 'children'
                                    }"
                                    clearable
                                    placeholder="请选择标签"
                                >
                                    <template slot-scope="{ node, data }">
                                        <span>{{ data.label }}</span>
                                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                    </template>
                                </el-cascader>
                            </div>
                        </el-form-item>

                        <el-form-item label="是否精品：">
                            <el-select
                                :clearable="true"
                                v-model="form.excellentFlag"
                                placeholder="请选择歌单类型"
                                class="handle-select mr10 w"
                                :disabled="$route.query.e === '1' ? true : false"
                            >
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="状态：">
                            <el-select
                                :clearable="true"
                                :disabled="$route.query.e === '1' ? true : false"
                                v-model="form.status"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="上线" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="上线时间：">
                            <el-date-picker
                                :disabled="$route.query.e === '1' ? true : false"
                                v-model="form.publishTime"
                                type="datetime"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="描述:">
                            <el-input
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.describe"
                                maxlength="2000"
                                show-word-limit
                                rows="5"
                                :disabled="$route.query.e === '1' ? true : false"
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item label="添加歌曲：" v-if="$route.query.e == '0'">
                            <el-input
                                placeholder="歌曲名"
                                @keyup.native.enter="handleSearch"
                                clearable
                                v-model="query.importName"
                                class="handle-input mr10"
                            ></el-input>

                            <el-input
                                @keyup.native.enter="handleSearch"
                                clearable
                                v-model="query.actorName"
                                placeholder="歌手名"
                                class="handle-input mr10"
                            ></el-input>

                            <el-input
                                @keyup.native.enter="handleSearch"
                                clearable
                                v-model="query.albumName"
                                placeholder="专辑名"
                                class="handle-input mr10"
                            ></el-input>

                            <el-button type="primary" @click="handleSearch" class="handle-btn">搜索</el-button>
                        </el-form-item>
                    </div>
                    <div style="display: inline-block" class="wrapper-right">
                        <el-form-item label="封面:" prop="src">
                            <div class="upload-file">
                                <div class="show-img" v-if="query.src">
                                    <img :src="query.src" ref="img" alt="" />
                                    <span class="after" @click="removeFile()"
                                        ><img src="@/assets/img/ico_feedback_delete@2x.png" alt=""
                                    /></span>
                                </div>
                                <!-- 文件上传按钮 -->
                                <a href="javascript:void(0)" class="btn" v-else>
                                    <span class="add-btn">
                                        <img src="@/assets/img/ico_feedback_add@2x.png" alt="" />
                                    </span>
                                    <input
                                        v-if="$route.query.e == '0'"
                                        type="file"
                                        accept="image/*"
                                        capture="camera"
                                        id="file"
                                        name="file"
                                        @change="upload"
                                    />
                                </a>
                            </div>
                            <p style="paddinng: 0; margin: 0; text-align: center">JPG、PNG文件 5M</p>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <!-- 表格部分 -->
            <div class="table">
                <!-- ====================左边================== -->
                <div class="left">
                    <el-table
                        :cell-style="{ color: '#666', 'font-size': '14px' }"
                        :data="tableData_"
                        border
                        resizable
                        ref="multipleTable"
                        :header-cell-style="rowClass"
                    >
                        <el-table-column width="auto" label="ID" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column width="auto" label="歌曲名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.name }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="歌手名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.actors ? scope.row.actors.name : '' }}</template>
                        </el-table-column>
                        <el-table-column width="auto" label="专辑名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.tblAlbum ? scope.row.tblAlbum.name : '' }}</template>
                        </el-table-column>
                        <el-table-column label="试听" prop="preview" align="center">
                            <template slot-scope="scope">
                                <a
                                    v-if="scope.row.tblSongfiles && scope.row.tblSongfiles.length > 0"
                                    @click="handleClick($event, scope.row, scope.$index)"
                                    style="color: black; display: inline-block; cursor: pointer; font-size: 16px"
                                >
                                    <svg-icon
                                        :data_iconName="scope.row.paused ? '播放' : '暂停'"
                                        :className="scope.row.paused ? 'play_icon' : 'pause_icon'"
                                    />
                                </a>
                            </template>
                        </el-table-column>

                        <el-table-column width="auto" label="添加" align="center" v-if="$route.query.e === '0'">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    :disabled="getAllSongID(tableData).includes(scope.row.id)"
                                    size="mini"
                                    @click="handleAdd(scope.$index, scope.row)"
                                    >添加</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination" v-if="$route.query.e == '0'">
                        <el-pagination
                            background
                            layout="total,sizes, prev, pager, next, jumper"
                            :page-sizes="[5, 10, 20, 30]"
                            @size-change="handleSizeChange1"
                            :current-page="query.pageIndex"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @current-change="handlePageChange1"
                        ></el-pagination>
                    </div>
                </div>
                <!-- =======================================右边============================================================================================================================================================ -->
                <div class="right">
                    <p class="subTitle">歌曲列表:</p>
                    <el-table
                        :cell-style="{ color: '#666', 'font-size': '14px' }"
                        :data="tableData"
                        border
                        resizable
                        ref="multipleTable"
                        :header-cell-style="rowClass"
                    >
                        <el-table-column width="auto" label="ID" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column width="auto" label="歌曲名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.name }}</template>
                        </el-table-column>

                        <el-table-column width="auto" label="歌手名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.actors ? scope.row.actors.name : '' }}</template>
                        </el-table-column>
                        <el-table-column width="auto" label="专辑名" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.albumName }}</template>
                        </el-table-column>

                        <el-table-column label="试听" prop="preview" align="center">
                            <template slot-scope="scope">
                                <a
                                    v-if="
                                        (scope.row.tblSongfiles && scope.row.tblSongfiles.length > 0) ||
                                        (scope.row.files && scope.row.files.length > 0)
                                    "
                                    @click="handleClick_($event, scope.row, scope.$index)"
                                    style="color: black; display: inline-block; cursor: pointer; font-size: 16px"
                                >
                                    <svg-icon
                                        :data_iconName="scope.row.paused ? '播放' : '暂停'"
                                        :className="scope.row.paused ? 'play_icon' : 'pause_icon'"
                                    />
                                </a>
                            </template>
                        </el-table-column>

                        <el-table-column width="auto" label="删除" align="center" v-if="$route.query.e === '0'">
                            <template slot-scope="scope">
                                <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>

                        <el-table-column width="auto" label="排序" align="center" v-if="$route.query.e === '0'">
                            <template slot-scope="scope">
                                <li
                                    @dragenter="dragenter($event, scope.$index)"
                                    @dragover="dragover($event, scope.$index)"
                                    @dragstart="dragstart(scope.$index)"
                                    draggable
                                    style="
                                        list-style: none;
                                        margin: 0;
                                        padding: 0;
                                        width: 100%;
                                        height: 100%;
                                        display: flex;
                                        justify-content: center;
                                        cursor: pointer;
                                    "
                                >
                                    <span
                                        @click="handleTop(scope.$index, scope.row)"
                                        style="
                                            display: inline-block;
                                            width: 25px;
                                            height: 25px;
                                            box-sizing: border-box;
                                            background: rgb(208 201 217 / 52%);
                                            padding: 2.5px 0 2.5px 0;
                                            text-align: center;
                                            margin-right: 10px;
                                        "
                                        ><img style="width: 20px; height: 20px" src="@/assets/img/向上.png" alt=""
                                    /></span>
                                    <span
                                        @click="handleBottom(scope.$index, scope.row)"
                                        style="
                                            display: inline-block;
                                            width: 25px;
                                            height: 25px;
                                            box-sizing: border-box;
                                            background: rgb(208 201 217 / 52%);
                                            padding: 2.5px 0 2.5px 0;
                                            text-align: center;
                                        "
                                        ><img style="width: 20px; height: 20px" src="@/assets/img/向下.png" alt=""
                                    /></span>

                                    <!-- <span
                                        
                                        style="display:inline-block; width:25px; height: 25px; box-sizing: border-box; background: rgba(0,0,0,0.1); 
                                padding: 2.5px 0 2.5px 0;text-align:center; cursor:pointer;"
                                        ><img style="width:20px; height:20px;" src="@/assets/img/向下.png" alt=""
                                    /></span> -->
                                </li>
                            </template>
                        </el-table-column>

                        <el-table-column width="auto" label="类型" align="center" v-if="$route.query.e === '1'">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" v-if="scope.row.record === '新增'">{{ scope.row.record }}</el-button>
                                <el-button type="text" class="red" v-if="scope.row.record === '删除'">{{ scope.row.record }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- ======================================= -->
            </div>
            <!-- //表格部分 -->
            <el-row>
                <el-button v-if="$route.query.e == '0'" @click="handleCancel">取消</el-button>
                <!-- <el-button v-if="$route.query.e == 'false'" type="primary" :disabled="disabled" @click="handleSave(2)"
                    >保存</el-button
                > -->

                <el-button
                    v-if="$route.query.e == '0'"
                    type="primary"
                    :disabled="
                        legals.includes(true) ||
                        checkRequire({
                            name: form.name,
                            tags: form.tags,
                            src: query.src
                        })
                    "
                    @click="handleSave(0)"
                    >保存并提交审核</el-button
                >

                <el-button v-if="$route.query.e === '1'" type="primary" @click="handlePass">通过</el-button>
                <el-button v-if="$route.query.e === '1'" @click="handleRefuse">拒绝</el-button>
            </el-row>
        </div>
        <!-- 左边 -->
        <audio
            ref="audio"
            @error="error"
            @play="ready"
            :src="
                currentSong.tblSongfiles && currentSong.tblSongfiles[0]
                    ? currentSong.tblSongfiles[0].filePath
                    : '' || (currentSong.files && currentSong.files[0] ? currentSong.files[0].url : '')
            "
        ></audio>
        <!-- 右边 -->
        <audio
            ref="audio_"
            @error="error_"
            @play="ready_"
            :src="
                currentSong_.files && currentSong_.files[0]
                    ? currentSong_.files[0].url
                    : '' || (currentSong_.tblSongfiles && currentSong_.tblSongfiles[0] ? currentSong_.tblSongfiles[0].filePath : '')
            "
        ></audio>

        <el-dialog title="备注" :visible.sync="visible" width="30%">
            <el-form ref="reason" :model="reason" label-width="70px">
                <el-form-item label="">
                    <el-input
                        v-model="reason.remark"
                        maxlength="120"
                        show-word-limit
                        type="textarea"
                        :autosize="{ minRows: 10, maxRows: 15 }"
                        placeholder="请填写拒绝原因"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="refuse">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  // import { delete } from 'vue/types/umd';
  import NProgress from 'nprogress';
  import { throttle, debounce } from '@/utils/utils';
  import { mapGetters, mapMutations } from 'vuex';
  export default {
      name: 'EditMenu_1',
      computed: {
          ...mapGetters(['currentIndex_', 'currentIndex', 'playing_', 'playing', 'currentSong_', 'currentSong', 'tagsList'])
          // playIcon_() {
          //     console.log(this.playing_);
          //     return !this.playing_;
          // }
      },
      data() {
          return {
              legals: [false, false],
              tips: '',
              color: '#f00',
              songReady: false,
              value1: '',
              baseUrl: process.env.VUE_APP_SRC1,
              tableData: [],
              tagList: [],
              tableData_: [],
              pageTotal: 0,
              query: {
                  src: '',
                  pageIndex: 1,
                  pageSize: 10,
                  importName: '',
                  actorName: '',
                  albumName: ''
              },
              rules: {
                  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                  tags: [{ required: true, message: '请选择标签', trigger: 'change' }],
                  src: [{ required: true, message: '请选择封面', trigger: 'change' }]
              },
              reason: {
                  remark: ''
              },
              visible: false,
              form: {
                  // tags: [],
                  // excellentFlag: false,
                  // name: '',
                  // status: '',
                  // publishTime: '',
                  // describe: '',
                  // songs: []
              },
              dragIndex: '',
              enterIndex: ''
          };
      },
      created() {
          if (this.$route.query.id) {
              this.form = {};
              this.tableData = [];
              this.tableData_ = [];
              this.getDataById(this.$route.query.id);
              // 获取标签
              this.getTagData();
          }

          // this.getSongListData();
          // console.log(this.$route.query.e);
      },
      watch: {
          '$route.path'(a, b) {
              console.log(a, b);
              if (a == '/edit/menu_1' && b == '/edit/menu' && this.$route.query.s == '1') {
                  // 什么都不做
              } else if (
                  a == '/edit/menu_1' &&
                  b == '/edit/menu' &&
                  this.$route.query.id &&
                  (this.$route.query.e == '0' || this.$route.query.e == '1')
              ) {
                  this.tableData = [];
                  this.tableData_ = [];
                  this.getDataById(this.$route.query.id);
                  // 获取标签
                  this.getTagData();
              }
          },
          // songReady(a, b) {
          //     console.log(a, b);
          //     if (a == true) {
          //         var audio = this.$refs.audio_;
          //         if (audio.paused) {
          //             audio.currentTime = 0; // 重新播放
          //             // 暂停变播放
          //             audio.play();
          //         } else {
          //             // 播放变暂停
          //             audio.pause();
          //         }
          //     }
          // },

          // 右边
          playing_(newPlaying, oldPlaying) {
              console.log(newPlaying);
              this.$nextTick(() => {
                  let audio_ = this.$refs.audio_;
                  newPlaying ? audio_.play() : audio_.pause();
              });
          },
          // 左边
          playing(newPlaying) {
              console.log(newPlaying);
              this.$nextTick(() => {
                  let audio = this.$refs.audio;
                  newPlaying ? audio.play() : audio.pause();
              });
          },
          // 右边
          currentSong_(newSong, oldSong) {
              console.log(newSong, oldSong);
              if (newSong.id === oldSong.id) {
                  return;
              }
              this.$nextTick(() => {
                  // this.getLyric();
                  this.$refs.audio_.play();
              });
          },
          // 左边
          currentSong(newSong, oldSong) {
              console.log(newSong, oldSong);
              if (newSong.id === oldSong.id) {
                  return;
              }
              this.$nextTick(() => {
                  // this.getLyric();
                  this.$refs.audio.play();
              });
          },
          $route: function (newroute, oldroute) {
              console.log(newroute, oldroute);
              if (newroute.path == '/edit/menu_1' && oldroute.path == '/edit/menu') {
                  this.setPlayingState_(false);
                  this.setPlayingState(false);
                  this.setCurrentIndex_(-1);
                  this.setCurrentIndex(-1);
              }
          }
      },
      methods: {
          checkRequire(obj) {
              return this.$isEmpty(obj);
          },
          dragstart(index) {
              this.dragIndex = index;
          },
          dragenter(e, index) {
              e.preventDefault();
              // 避免源对象触发自身的dragenter事件
              if (this.dragIndex !== index) {
                  // 避免重复触发目标对象的dragenter事件
                  if (this.enterIndex !== index) {
                      let moving = this.tableData[this.dragIndex];
                      this.tableData.splice(this.dragIndex, 1);
                      this.tableData.splice(index, 0, moving);
                      // 排序变化后目标对象的索引变成源对象的索引
                      this.dragIndex = index;
                  } else {
                      this.enterIndex = index;
                  }
              }
          },
          dragover(e, index) {
              e.preventDefault();
          },
          handleTop(index, row) {
              console.log(index, row);
              if (index - 1 >= 0) {
                  [this.tableData[index], this.tableData[index - 1]] = [this.tableData[index - 1], this.tableData[index]];
              } else {
                  // 什么都不做
              }

              this.tableData = [...this.tableData];
          },
          handleBottom(index, row) {
              console.log(index, row);
              if (index + 1 < this.tableData.length) {
                  [this.tableData[index], this.tableData[index + 1]] = [this.tableData[index + 1], this.tableData[index]];
              } else {
                  // 什么都不做
              }

              this.tableData = [...this.tableData];
          },
          ...mapMutations({
              setCurrentIndex_: 'SET_CURRENT_INDEX_',
              setCurrentIndex: 'SET_CURRENT_INDEX',
              setPlayingState_: 'SET_PLAYING_STATE_',
              setPlayingState: 'SET_PLAYING_STATE', // 左边
              setPlayList_: 'SET_PLAYLIST_',
              setPlayList: 'SET_PLAYLIST',
              SET_TAGSLIST: 'SET_TAGSLIST'
          }),
          handleSearchName: debounce(function (value) {
              this.searchName(value);
          }, 1000),
          async searchName(name) {
              try {
                  let url = '/playlist/checkName';
                  let { data: res } = await this.$http[2].get(url, {
                      params: this.$removeField({
                          name
                      })
                  });
                  console.log(res);

                  setTimeout(() => {
                      // console.log('发送请求！');
                      // this.goodResult = value.split('').join('-');

                      this.tips = res.message;
                      if (this.tips == '名称可用') {
                          this.color = '#409EFF';
                          // this.disabled = false;
                          this.legals[0] = false;
                      } else {
                          this.color = '#f00';
                          // this.disabled = true;
                          this.legals[0] = true;
                      }
                  }, 500);
              } catch (err) {
                  console.dir(err);
                  // this.disabled = false;
                  this.legals[0] = false;
              }
          },
          ready() {
              this.songReady = true;
          },
          ready_() {
              this.songReady = true;
          },
          error() {
              this.songReady = true;
          },
          error_() {
              this.songReady = true;
          },

          handleClick(e, row, index) {
              console.log(e, row, index);
              this.togglePlaying(e, row, index);
          },
          // 右边
          handleClick_(e, row, index) {
              this.togglePlaying_(e, row, index);
          },
          // 左边
          handleSearch() {
              this.getSongListData();
          },
          // 右边
          togglePlaying_(e, row, index) {
              console.log(e, row, index, row.paused);
              // let audio = this.$refs.audio_;
              // 切换图标
              if (row.paused == true) {
                  // 先清理左边
                  if (this.tableData_ && this.tableData_.length && this.tableData_.length > 0) {
                      for (var i = 0; i < this.tableData_.length; i++) {
                          this.tableData_[i].paused = true;
                      }
                      this.tableData_ = [...this.tableData_];
                      this.setPlayingState(false);
                      // let audio = this.$refs.audio;
                      // audio.pause();
                  }

                  for (var i = 0; i < this.tableData.length; i++) {
                      if (row.id != this.tableData[i].id) {
                          this.tableData[i].paused = true;
                      }
                  }
                  // 变为播放状态
                  row.paused = false;
              } else if (row.paused == false) {
                  console.log(row.paused);
                  // 全部变为暂停状态
                  for (var i = 0; i < this.tableData.length; i++) {
                      this.tableData[i].paused = true;
                  }
              }

              this.tableData = [...this.tableData];
              this.setPlayingState_(!row.paused);
              this.setPlayList_(this.tableData);
              this.setCurrentIndex_(index);
          },
          // 左边
          togglePlaying(e, row, index) {
              // 切换图标
              if (row.paused == true) {
                  // 先清理右边
                  if (this.tableData && this.tableData.length && this.tableData.length > 0) {
                      for (var i = 0; i < this.tableData.length; i++) {
                          this.tableData[i].paused = true;
                      }
                      this.tableData = [...this.tableData];
                      // let audio_ = this.$refs.audio_;
                      // audio_.pause();
                      this.setPlayingState_(false);
                  }

                  for (var i = 0; i < this.tableData_.length; i++) {
                      if (row.id != this.tableData_[i].id) {
                          this.tableData_[i].paused = true;
                      }
                  }
                  row.paused = false;
              } else if (row.paused == false) {
                  for (var i = 0; i < this.tableData_.length; i++) {
                      this.tableData_[i].paused = true;
                  }
              }

              this.tableData_ = [...this.tableData_];
              // 切换图标
              // this.setPlayingState(!this.playing);
              this.setPlayingState(!row.paused);
              this.setPlayList(this.tableData_);
              this.setCurrentIndex(index);
          },

          handlePass() {
              this.$confirm('确定要通过吗？', '提示', {
                  type: 'warning'
              })
                  .then(() => {
                      this.pass();
                  })
                  .catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消通过'
                      });
                  });
          },
          async pass() {
              try {
                  let url = '/playlist/verification';
                  let { data: res } = await this.$http[2].get(url, {
                      params: this.$removeField({
                          id: this.$route.query.id
                      }),
                      headers: {
                          name: localStorage.getItem('ms_username')
                      }
                  });

                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.$closeActiveTag.call(this);
                  this.$router.replace({
                      path: '/edit/menu'
                  });
              } catch (err) {
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          handleRefuse() {
              // this.$confirm('确定要拒绝吗？', '提示', {
              //     type: 'warning'
              // })
              //     .then(() => {
              //         this.refuse();
              //     })
              //     .catch(() => {
              //         this.$message({
              //             type: 'info',
              //             message: '已取消拒绝'
              //         });
              //     });
              this.visible = true;
              this.reason.remark = '';
          },
          async refuse() {
              try {
                  let url = '/playlist/refuse';
                  let { data: res } = await this.$http[2].get(url, {
                      params: this.$removeField({
                          id: this.$route.query.id,
                          remark: this.reason.remark
                      }),
                      headers: {
                          name: localStorage.getItem('ms_username')
                      }
                  });
                  this.visible = false;
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.$closeActiveTag.call(this);
                  this.$router.replace({
                      path: '/edit/menu'
                  });
              } catch (err) {
                  console.dir(err);
                  this.visible = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          setValueNull() {
              this.getSongListData();
          },
          // 左侧歌曲列表数据
          async getSongListData() {
              try {
                  this.setPlayingState(false);
                  for (var i = 0; i < this.tableData_.length; i++) {
                      this.tableData_[i].paused = true;
                  }
                  this.tableData_ = [...this.tableData_];

                  let url = '/song/list';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          page: this.query.pageIndex,
                          size: this.query.pageSize,
                          importName: this.query.importName.trim(),
                          actorName: this.query.actorName.trim(),
                          albumName: this.query.albumName.trim()
                      })
                  });
                  console.log('歌曲列表', res);
                  if (res.data.content && res.data.content.length && res.data.content.length > 0) {
                      res.data.content.map((item) => {
                          item.paused = true;
                          if (item.actors && item.actors.length > 0) {
                              item.actors.name = '';
                              // item.actors = [];
                              // item.actors.name = '';
                              item.actors.map((val) => {
                                  item.actors.name += val.name + '/';
                              });
                              item.actors.name = item.actors.name.slice(0, -1);
                              // ======
                              item.albumName = item.actors.name;
                              // ======

                              // item.actors.name = item.actors.name.slice(0, -1);
                          } else {
                              // item.tblActors = [];
                              // item.tblActors.name = '';

                              item.actors = [];
                              item.actors.name = '';
                          }
                          if (item.tblSongfiles && item.tblSongfiles.length > 0) {
                              item.tblSongfiles[0].filePath = `${this.baseUrl}/api/stream/audio?path=${item.tblSongfiles[0].filePath}`;
                          } else {
                              item.tblSongfiles = [];
                          }
                      });
                      this.setPlayList(res.data.content);

                      this.tableData_ = res.data.content;
                      this.pageTotal = res.data.totalElements;
                  } else {
                      this.tableData_ = [];
                      this.pageTotal = 0;
                  }
              } catch (err) {
                  console.log(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          removeFile() {
              this.query.src = '';
          },
          upload(e) {
              var event = e || window.event;
              var target = event.target || e.srcElement;
              var file = target.files[0];
              this.$getImgTest.call(this, e, target, file, 1);
          },
          async uploadFile(e, target, file) {
              try {
                  let isLt5M = target.files[0].size / 1024 / 1024 <= 5;
                  if (!isLt5M) {
                      return this.$message.error('上传图片大小不能超过5MB!');
                  }

                  // this.query.src = this.$getObjectURL(file);
                  var formdata = new FormData();
                  formdata.append('coverImage', file);
                  formdata.append('id', this.$route.query.id);
                  let url = '/playlist/uploadImg';

                  NProgress.start();
                  let { data: res } = await this.$http[2].post(url, formdata, {
                      headers: {
                          'Content-Type': 'multipart/form-data',
                          name: localStorage.getItem('ms_username')
                      }
                  });
                  console.log('响应数据', res);
                  target.value = null;
                  // this.$message.success({
                  //     message: res.message,
                  //     duration: 1500
                  // });

                  if (res.code != '0000') {
                      this.$message.error({
                          message: res.message,
                          duration: 1500
                      });
                  } else {
                      this.$message.success({
                          message: res.message,
                          duration: 1500
                      });
                      this.getDataById(this.$route.query.id);
                  }
                  NProgress.done();
              } catch (err) {
                  console.dir(err);
                  NProgress.done();
                  target.value = null;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },

          async getTagData() {
              try {
                  let url = '/tag/tagAll';
                  let { data: res } = await this.$http[2].get(url, {
                      params: {
                          type: 4
                          // page: this.query.pageIndex,
                          // size: this.query.pageSize
                      }
                  });
                  // console.log('标签列表', res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  if (res.data && res.data.length != 0) {
                      res.data.map((v) => {
                          v.disabled = true;
                      });
                      var ret = this.formatData(res.data);
                      console.log('ret', ret);
                      this.tagList = ret;
                      // this.pageTotal = res.data.totalElements || 0;
                  } else {
                      this.tagList = [];
                      // this.pageTotal = res.data.totalElements || 0;
                  }
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          formatData(array) {
              for (let item of array) {
                  item.value = item.id;
                  item.label = item.description;
                  item.children = [];
                  // 删除返回的没用的属性
                  delete item.type;
                  delete item.createTime;
                  delete item.description;
                  delete item.groupId;
                  delete item.id;
                  delete item.name;
                  delete item.status;
                  delete item.updateTime;
                  delete item.pid;

                  if (item.tblTags && item.tblTags.length != 0) {
                      item.children = item.tblTags;
                      // 删除返回的没用的属性
                      delete item.tblTags;
                      this.formatData(item.children);
                  } else {
                      delete item.children;
                  }
              }
              return array;
          },
          async getDataById(mid) {
              try {
                  let url = '/playlist/info';
                  let { data: res } = await this.$http[2].get(url, {
                      params: this.$removeField({
                          playlistId: mid,
                          editFlag: this.$route.query.e === '1' ? true : false
                      })
                  });
                  console.log('编辑歌单', res);
                  // 解构
                  let { name, tags, excellentFlag, status, publishTime, describe, coverUrl, songs } = res.data;
                  // 中间处理
                  // songs = songs ? songs : [];
                  if (songs && songs.length > 0) {
                      for (var item of songs) {
                          if (item.actors && item.actors.length > 0) {
                              item.actors.name = '';
                              for (var val of item.actors) {
                                  item.actors.name += val.name + '/';
                              }
                              item.actors.name = item.actors.name.slice(0, -1);
                          } else {
                              item.actors = [];
                              item.actors.name = '';
                          }

                          // ============================================================
                          if (item.files && item.files.length > 0) {
                              item.files[0].url = `${this.baseUrl}/api/stream/audio?path=${item.files[0].url}`;
                          } else {
                              item.files = [];
                          }
                      }
                      this.setPlayList_(songs);
                  } else {
                      songs = [];
                  }

                  // var tempTags = [];
                  // if (tags && tags.length > 0) {
                  //     for (var item of tags) {
                  //         if (item.groupId) {
                  //             tempTags.push([item.groupId, item.id]);
                  //         } else if (item.pid) {
                  //             tempTags.push([item.pid, item.id]);
                  //         }
                  //     }
                  // } else {
                  //     tags = [];
                  // }

                  publishTime = publishTime ? this.$timstampToStandardDate(publishTime) : '';
                  // 赋值
                  this.form = {
                      name,
                      // tags: tempTags,
                      tags: tags && tags.length > 0 ? tags : [],
                      excellentFlag,
                      status,
                      publishTime,
                      describe,
                      coverUrl,
                      songs
                  };

                  this.query.src = `${this.baseUrl}/api/stream/audio?path=${this.form.coverUrl}`;
                  if (this.form.songs && this.form.songs.length && this.form.songs.length > 0) {
                      this.form.songs.map((item) => {
                          item.paused = true;
                          if (item.tblAlbum && item.tblAlbum.length > 0) {
                              item.tblAlbum.name = '';
                              item.tblAlbum.map((item_) => {
                                  item.tblAlbum.name += item_.name + ',';
                              });
                              item.tblAlbum.name = item.tblAlbum.name.slice(0, -1);
                          } else {
                              item.tblAlbum = [];
                              item.tblAlbum.name = '';
                          }
                      });
                      this.form.songs.sort((a, b) => {
                          return a.ontop - b.ontop;
                      });
                  } else {
                      this.form.songs = [];
                  }

                  this.tableData = this.form.songs;
                  if (this.$route.query.e == '1') {
                      // this.tableData_ = [];
                      // for (var i = 0; i < this.tableData.length; i++) {
                      //     if (!this.tableData[i].record) {
                      //         this.tableData_.push(this.tableData[i]);
                      //         this.tableData.splice(i, 1);
                      //     }
                      // }
                  }

                  if (this.$route.query.e === '1') {
                  } else {
                  }

                  this.setPlayList_(this.tableData);

                  // var lis = document.querySelectorAll('.content-box .tags ul .tags-li');
                  // lis = [...lis];
                  // var activeIndex = lis.findIndex(item => {
                  //     return item.classList.contains('active');
                  // });
                  // var tempArr = [...this.tagsList];
                  // tempArr[activeIndex].title = this.form.name;
                  // this.SET_TAGSLIST(tempArr);

                  this.$setActiveTag.call(this, this.form.name);
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          ...mapMutations(['SET_TAGSLIST']),
          handleAdd(index, row) {
              // console.log(index, row);
              var row = { ...row };
              row.paused = true;
              if (this.tableData.length == 0) {
                  this.tableData.unshift(row);
              } else {
                  var index = this.tableData.findIndex((item) => {
                      return item.id == row.id;
                  });
                  if (index != -1) {
                      return this.$message.warning({
                          message: '请勿重复添加',
                          duration: 1500
                      });
                  } else {
                      this.tableData.unshift(row);
                  }
              }
              if (this.currentIndex_ != -1) {
                  this.setCurrentIndex_(this.currentIndex_ + 1);
              } else {
                  this.setCurrentIndex_(-1);
              }

              this.setPlayList_(this.tableData);
              // this.setPlayingState_(false);
              // this.setPlayingState(false);
              // this.setCurrentIndex_(-1);
              // for (var i = 0; i < this.tableData.length; i++) {
              //     this.tableData[i].paused = true;
              // }
              // this.tableData = [...this.tableData];
          },
          handleDelete(index, row) {
              this.tableData.splice(index, 1);
              this.setPlayList_(this.tableData);
              console.log(row.paused, index);
              if (row.paused == false) {
                  this.setCurrentIndex_(-1);
                  this.setPlayingState_(false);
              } else if (row.paused == true) {
                  var currentPlaySongIndex = this.tableData.findIndex((item) => {
                      return item.paused == false;
                  });
                  this.setCurrentIndex_(currentPlaySongIndex);
              }
          },
          rowClass({ row, rowIndex }) {
              return 'height: 26px;background-color:#ccc !important;color:#fff; text-align: center; color:#333;';
          },
          handleSave(auditFlag) {
              this.$confirm('确定要提交吗？', '提示', {
                  type: 'warning'
              })
                  .then(() => {
                      this.save(auditFlag);
                  })
                  .catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消提交'
                      });
                  });
          },
          getOneArray(twoArray) {
              var tempArr = [];
              if (twoArray && twoArray.length > 0) {
                  twoArray = Array.from(twoArray);
                  twoArray.map((arr) => {
                      arr = arr || [];
                      arr = Array.from(arr);
                      tempArr.push(arr[arr.length - 1]);
                  });
              }
              return [...new Set(tempArr)];
          },
          async save(auditFlag) {
              try {
                  NProgress.start();
                  let url = '/playlist/update';
                  let { data: res } = await this.$http[2].post(
                      url,
                      this.$removeField({
                          id: this.$route.query.id,
                          name: this.form.name,
                          // tagId: this.getOneArray(this.form.tags),
                          tagId: this.form.tags,
                          status: this.form.status,
                          publishTime: this.$standardDateToTimstamp(this.form.publishTime),
                          description: this.form.describe,
                          excellentFlag: this.form.excellentFlag,
                          songs: this.getAllSongID(this.tableData),
                          auditFlag
                      }),
                      {
                          headers: {
                              name: localStorage.getItem('ms_username')
                          }
                      }
                  );
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });

                  this.setPlayingState_(false);
                  this.setPlayingState(false);
                  this.setCurrentIndex_(-1);
                  this.setCurrentIndex(-1);

                  var lis = document.querySelectorAll('.content-box .tags ul .tags-li');
                  lis = [...lis];
                  var activeIndex = lis.findIndex((item) => {
                      return item.classList.contains('active');
                  });
                  console.log(activeIndex, this.tagsList);
                  var tempArr = [...this.tagsList];
                  tempArr.splice(activeIndex, 1);
                  this.SET_TAGSLIST(tempArr);
                  // console.log(this.$getTagsDom());
                  // 方式1
                  this.$router.replace({
                      path: '/edit/menu'
                  });

                  // 方式2
                  // this.getDataById(this.$route.query.id);
                  // this.getTagData();
                  NProgress.done();
              } catch (err) {
                  console.dir(err);
                  NProgress.done();
              }
              // this.display('none');
              // this.$router.replace({
              //     path: '/edit/menu'
              // });
          },
          // display(a) {
          //     this.$nextTick(() => {
          //         document.querySelector('.wrapper .content-box .tags ul .tags-li.active').style.display = a;
          //     });
          // },
          getAllSongID(array) {
              if (array && array.length && array.length > 0) {
                  return array.map((item) => {
                      return item.id;
                  });
              } else {
                  return [];
              }
          },
          handleCancel() {
              this.$router.replace({
                  path: '/edit/menu'
              });
          },
          // 分页导航
          handlePageChange1(val) {
              this.$set(this.query, 'pageIndex', val);
              this.getSongListData();
          },
          handleSizeChange1(val) {
              this.$set(this.query, 'pageSize', val);
              this.getSongListData();
          }
      }
  };
</script>

<style lang="scss">
  #edit_menu_1 {
      .table {
          .u1043_icon,
          .play_icon,
          .pause_icon {
              width: 43px;
              height: 37px;
          }
          width: 100%;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          .left {
              width: 49%;
          }
          .right {
              width: 49%;
              position: relative;
              max-height: 650px;
              overflow: auto;
              .subTitle {
                  position: absolute;
                  left: 0;
                  top: -45px;
                  color: #666;
              }
          }
      }

      .el-row {
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: right;
      }
      .wrapper {
          display: grid;
          grid-template-columns: 50% 50%;
          justify-content: center;
          justify-items: center;
          grid-auto-flow: row;
          align-items: flex-start;
          align-content: flex-start;
          .wrapper-left {
              width: 90%;
          }
          .wrapper-right {
              width: 90%;
              .upload-file {
                  background: transparent;
                  position: relative;
                  box-sizing: border-box;
                  display: grid;
                  grid-template-columns: 100%;
                  grid-template-rows: 260px;
                  align-items: center;
                  align-content: flex-start;
                  justify-items: center;
                  grid-auto-flow: row;
                  margin-bottom: 10px;
                  .show-img {
                      width: 250px;
                      height: 250px;
                      position: relative;
                      border-radius: 15px;
                      img {
                          width: 100%;
                          height: 100%;
                          border-radius: 15px;
                          box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
                      }
                      .after {
                          position: absolute;
                          right: -0.26rem;
                          top: -0.26rem;
                          font-size: 1.04rem;
                          width: 1.04rem;
                          height: 1.04rem;
                          line-height: 1.04rem;
                          text-align: center;
                      }
                  }
                  .btn {
                      border: 1px dashed #666;
                      position: relative;
                      left: 0;
                      display: inline-block;
                      text-align: center;
                      color: #fff;
                      text-decoration: none;
                      width: 250px;
                      height: 250px;
                      border-radius: 15px;
                      .add-btn {
                          position: absolute;
                          left: 50%;
                          top: 50%;
                          transform: translate(-50%, -50%);
                          display: flex;
                          flex-direction: column;
                          justify-content: space-between;
                          align-items: center;
                          width: 30px;
                          height: 30px;
                          border-radius: 15px;
                          img {
                              width: 100%;
                              height: 100%;
                          }
                      }
                      #file {
                          opacity: 0;
                          width: 100%;
                          height: 100%;
                          position: absolute;
                          left: 0;
                          top: 0;
                          border-radius: 15px;
                      }
                  }
              }
          }
      }
      .handle-box {
          margin-bottom: 20px;
      }

      .handle-select {
          /* width: 120px; */
          width: 185px;
      }

      .handle-input {
          width: 25%;
          display: inline-block;
      }
      .handle-btn {
          width: 15%;
          float: right;
      }
      .table {
          width: 100%;
          font-size: 14px;
      }
      .red {
          color: #ff0000;
      }
      .mr10 {
          margin-right: 10px;
      }
      .table-td-thumb {
          display: block;
          margin: auto;
          width: 40px;
          height: 40px;
      }
      .w {
          width: 100%;
      }
      .el-cascader-menu {
          max-width: 250px;
      }

      .el-pagination.is-background .btn-next,
      .el-pagination.is-background .btn-prev,
      .el-pagination.is-background .el-pager li {
          margin: 0 1px !important;
          min-width: 15px !important;
      }
      .el-pagination__jump {
          margin-left: 0;
      }
      .el-dialog__body {
          .el-form {
              .el-form-item {
                  .el-form-item__content {
                      margin-left: 0 !important;
                  }
              }
          }
      }
  }
</style>
